<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// ES6类与继承
// 在JS中没有类！！！
// 类 -> 构造函数
// ES6提供了class类的概念（语法糖）

// 语法：
class Cat{// 类体，不是键值对的对象  父类
    // 构造器函数
    constructor(n,c,a){
        // this -> Cat的实例对象
        this.name = n;
        this.color = c;
        this.age = a;
        this.say = function (){
            console.log( '卖萌~' );
        }
        // this.type = 'animal';// 对象自身的属性
    }
    type = 'animal';// 对象自身的属性
    #xixi = '嘻嘻';// 私有属性（只能在class内部使用）
    #test(){// 私有方法（只能在class内部使用）
        console.log( this.type );
        console.log( this.#xixi );
    }
    skill(){// 原型对象上的方法
        this.#test();
        console.log( '抓老鼠' );
    }
    static hehe = '呵呵';// 静态属性
    static haha(){// 静态方法
        console.log( '哈哈' );
    }
    
}
Cat.prototype.type = 'animal';// 原型对象上的属性（不推荐）
let cat1 = new Cat('小黑','black',4);
console.log( cat1 );// Cat {type: 'animal', name: '小黑', color: 'black', age: 4, say: ƒ}
console.log( Cat.hehe );
Cat.haha();
console.log( cat1.type );// 'animal'
console.log( cat1.xixi );// undefined
// console.log( cat1.#xixi );// 报错


// 1.使用 extends 实现继承
class Dog extends Cat{// 子类
    // 构造器函数
    constructor(f,n,c,a){
        // super(n,c,a) 类似于 Cat.call(this,n,c,a);
        super(n,c,a);// 2.必须先调用super方法，然后才能使用this!!!

        super.skill();// '抓老鼠'
        console.log( super.type );// 'animal'
        // console.log( super );// 报错，不能单独访问super

        // this -> Dog的实例对象
        this.food = f;
    }
}
let dog1 = new Dog('骨头','阿黄','yellow',2);
console.log( dog1 );// Dog {type: 'animal', name: '阿黄', color: 'yellow', age: 2, say: ƒ, food:"骨头"}
dog1.skill();// '抓老鼠'

</script>
</body>
</html>